<template>
  <div id="findpwd">
    <c-title :hide="false" text="忘记密码"></c-title>
    <!--<img style='width:20%;height:40px;position:absolute;display:block;left:74%;top:8rem;z-index:999' :src="imgcode" @click='getimgdata' v-if='imgcode'>-->
    <!-- 新页面 -->
    <div id="content">
      <div class="navTo">
        <div>
          <div @click="gotoUrl('login')">返回登录</div>
        </div>
      </div>
      <div class="zhuce">重置密码</div>
      <div class="zhuce-title">请设置您的登录密码，方便您下次登录</div>
      <div class="top">
        <ul class="area_number">
          <li v-if="country_code == 1 && is_enable == 0">
            <van-field label="国家区号" required v-model="form.country" placeholder="+86" type="number" maxlength="5" />
          </li>
        </ul>
        <ul class="login_info">
          <li v-if="uniacid == '88'">
            <van-field v-model.trim="form.login_name" type="text" clearable placeholder="请输入您的账号" :rules="[{ required: true, message: '请输入您的账号' }]" :border="false">
              <template #label>
                <div class="slotCode">
                  <img src="../../assets/images/login_user.png" style="width:1rem;height: 1.063rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
            </van-field>
          </li>
          <li v-if="is_enable == 0">
            <van-field v-model.trim="form.mobile" type="number" clearable placeholder="请输入您的手机号" :rules="[{ required: true, message: '请输入您的手机号' }]" :border="false">
              <template #label>
                <div class="slotCode">
                  <img src="../../assets/images/loginPhone.png" style="width: 12px;height: 18px;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
            </van-field>
          </li>
          <li v-if="imgcode">
            <van-field v-model.trim="form.captcha" clearable type="text" placeholder="请输入图形信息" :rules="[{ required: true, message: '请输入图形信息' }]">
              <template #label>
                <div class="slotCode">
                  <img src="../../assets/images/ht_bg_bgimg.png" style="width: 1rem;height: 0.875rem;" />
                  <div class="iconfont icon-advertise-next icon" style="margin-left: 8px;"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px;display: flex;align-items: center;">
                <img :src="imgcode" style="width: 3.594rem;height: 1.5rem;" @click="getimgdata()" v-if="imgcode" />
              </template>
            </van-field>
          </li>
          <li v-if="is_enable == 1">
            <van-field v-model.trim="form.mobile" type="text" clearable placeholder="请输入账号" :rules="[{ required: true, message: '请输入账号' }]" :border="false">
              <template #label>
                <div class="slotCode">
                  <img src="../../assets/images/login_user.png" style="width: 0.95rem;height: 1rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
            </van-field>
          </li>
          <li class="code" v-if="is_enable == 0 && uniacid != '70' && uniacid != '121'">
            <van-field v-model.trim="form.code" clearable type="digit" placeholder="请输入短信验证码" :rules="[{ required: true, message: '请输入短信验证码' }]">
              <template #label>
                <div class="slotCode">
                  <img src="../../assets/images/auth_code.png" style="width: 13.5px;height: 16.5px;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px;">
                <!-- <div style="font-size: 12px;" :style="'color:' + subjectColor" @click="verificationCode">{{ btnText }}</div> -->
                <div style="font-size: 12px;" :style="'color:' + '#00aaff'" @click="verificationCode">{{ btnText }}</div>

              </template>
            </van-field>
          </li>
          <li>
            <van-field v-model.trim="form.password" clearable :type="visibleSet ? 'text' : 'password'" placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]">
              <template #label>
                <div class="slotCode">
                  <div style="width: 0.85rem;">
                    <img
                      :src="visibleSet ? require('@/assets/images/view_password.png') : require('@/assets/images/no_view_password.png')"
                      :style="visibleSet ? 'width:0.95rem;height: 0.7rem;' : 'width: 0.98rem;height: 0.46rem;'"
                      @click="visibleSet = !visibleSet"
                    />
                  </div>
                  <div class="iconfont icon-advertise-next icon" style="margin-top: 0rem;"></div>
                </div>
              </template>
            </van-field>
          </li>
          <li>
            <van-field v-model.trim="form.confirm_password" clearable :type="visibleSure ? 'text' : 'password'" placeholder="确认密码" :rules="[{ required: true, message: '确认密码' }]">
              <template #label>
                <div class="slotCode">
                  <div style="width: 0.85rem;">
                    <img
                      :src="visibleSure ? require('@/assets/images/view_password.png') : require('@/assets/images/no_view_password.png')"
                      :style="visibleSure ? 'width:0.95rem;height: 0.7rem;' : 'width: 0.98rem;height: 0.46rem;'"
                      @click="visibleSure = !visibleSure"
                    />
                  </div>
                  <div class="iconfont icon-advertise-next icon" style="margin-top: 0rem;"></div>
                </div>
              </template>
            </van-field>
          </li>
        </ul>
      </div>
      <div class="encrypted" v-if="is_enable == 1">
        <div style="width: 100%; text-align: left; text-indent: 20px;font-size: 14px; color: #484848; padding: 5px 0;">
          密保问题
        </div>
        <div class="inputList">
          <van-cell-group :border="false">
            <van-field v-model="fathername" required label="父亲姓名" placeholder="请输入父亲姓名" :border="false" />
            <van-field v-model="mothername" required label="母亲姓名" placeholder="请输入母亲姓名" :border="false" />
          </van-cell-group>
        </div>
      </div>
      <!-- <div class="navTo">
        <div>
          <div @click="gotoUrl('login')">返回登录</div>
        </div>
      </div> -->
    </div>
    <!-- end -->
    <div class="foot set-pc-style">
      <van-button type="primary" :style="cssVars" :round="true" @click="findpwd">提交修改</van-button>
    </div>
  </div>
</template>

<script>
import findpwd_controller from "./new_findpwd_controller";

export default findpwd_controller;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
body {
  background-color: #fff !important;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
#findpwd {
  // 新页面
  #content {
    margin: 10px;

    .area_number {
      font-size: 16px;
      color: #333;
      margin-left: -9px;

      ::v-deep .van-field__label {
        width: 4.2em;
        font-size: 16px;
      }
    }

    .top {
      background-color: white;
      border-radius: 5px;
      padding: 15px;

      .login_info {
        ::v-deep .van-field__label {
          width: 3em;
          letter-spacing: 0.5px;
        }

        ::v-deep .van-cell {
          display: flex;
          align-items: center;
          border: 1px solid #ededed;
          border-radius: 25px;
          // width: 350px;
          height: 55px;
          margin-top: 12px;
        }

        li {
          /* border-bottom: solid 1px #ccc; */
          position: relative;

          input {
            width: 100%;
            border: none;
            border-bottom: solid 1px #eee;
          }

          span {
            // font-size: 14px;
            // position: absolute;
            // right: 0;
            // color: #333;
          }

          .slotCode {
            color: #00001c;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 0.2rem;

            .icon {
              width: 0.66rem;
              height: 1.35rem;
              margin-left: 0.688rem;
            }
          }

          .img {
            width: 40px;
            overflow: hidden;

            img {
              margin-top: 26%;
              width: 48%;
            }
          }
        }

        .code {
          .van-button {
            width: 8.125rem;
          }

          .van-button__text {
            white-space: nowrap;
            color: #ffff;
          }
        }
      }
    }
    .zhuce {
      width: 190px;
      height: 45px;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 23px;
      color: #05060a;
      line-height: 72px;
      text-align: left;
    margin-left: 20px;
    }
    .zhuce-title {
      margin-top: 25px;
      font-size: 14px;
      color: grey;
      text-align: left;
    margin-left: 20px;
    }
    .encrypted {
      border-radius: 5px;
      margin-top: 10px;

      .inputList {
        background-color: white;
        padding: 10px 5px;
        border-radius: 5px;
        margin-top: 7px;

        ::v-deep .van-field__label {
          width: 4rem;
          font-size: 15px;
          letter-spacing: 0.5px;
        }
      }
    }

    .navTo {
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      // margin: 1.344rem 1.281rem;
      // color: #484848;
      // font-size: 0.75rem;
      // letter-spacing: 0.038rem;
      // font-stretch: normal;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: 0rem 1.281rem;
      color: #00aaff;
      font-size: 0.75rem;
      letter-spacing: 0.038rem;
      // margin-bottom: 10rem;
      font-stretch: normal;
    }

    ::v-deep .van-field__label {
      font-size: 13px;
      color: #00001c;
      font-weight: 550;
      letter-spacing: 0.5px;
    }

    ::v-deep .van-cell--required::before {
      top: 13px;
      left: 5px;
    }
  }
  .foot {
    // position: fixed;
    // width: 100%;
    // bottom: 0;
    // height: 3.125rem;
    // background-color: #ffffff;
    padding: 0.46rem 1.53rem;
    // box-shadow: -0.009rem -0.125rem 0.406rem 0rem rgba(213, 213, 213, 0.59);
  }

  .city-info {
    border-radius: 0.656rem;
    width: 20rem;
    height: 32rem;
    margin: 0 auto;
    // padding-bottom: 5rem;
    background: #fff;

    header {
      border-radius: 0.656rem 0.656rem 0 0;
    }

    #a_content {
      // width: 14.438rem;
      margin: 0.5rem 0.9rem;
      height: 24rem;
      overflow-y: scroll;

      ::v-deep img {
        max-width: 100%;
        display: flex;
      }
    }
  }

  ::v-deep .van-button--primary {
    height: 2.7rem;
  width: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#00aaff), to(#006dff));
  background: -webkit-linear-gradient(left, #00aaff, #006dff);
  background: linear-gradient(to right, #00aaff, #006dff);
  border: 1px solid transparent;
  border-radius: 1.94rem;
    // height: 2.188rem;
    // width: 100%;
    // background-color: var(--color);
    // border: 1px solid var(--color);
    // border-radius: 1.094rem;
  }
}

::v-deep .van-cell {
  align-items: center;
}

::v-deep .van-field__control {
  font-size: 16px;
}
</style>
